<template>
  <div class="boxHead">
    <div class="administration">
      <router-link class="boxAdmin" :to="{name:'Login'}" v-show="!username">
        <i class="fa fa-user-circle-o" style="margin-top: 0"></i>
        立即登录
        <span style="margin: .3rem .4rem 0">签到有礼</span>
      </router-link>
      <router-link class="boxAdmin" :to="{name:'Logout'}" v-show="username">
        <i class="fa fa-user-circle-o"></i>
        <strong class="strong">
          账号:{{username}}
          <p><span>vivo</span>普通会员<span>vip</span></p>
        </strong>
        <span>签到有礼</span>
      </router-link>
      <ul>
        <li>
          <i class="fa fa-envelope-open-o"></i>
          <router-link :to="{name:'Integral'}">积分商城</router-link>
        </li>
        <li>
          <i class="fa fa-diamond"></i>
          <router-link :to="{name:'Integral'}">安装领积分</router-link>
        <li>
        <li>
          <i class="fa fa-flag-o"></i>
          <router-link :to="{name:'Activity'}">活动</router-link>
        <li>
        <li>
          <i class="fa fa-gift"></i>
        <router-link :to="{name:'Activity'}">会员礼包</router-link>
        </li>
      </ul>
    </div>
    <div style="margin: 0 .25rem">
      <div class="boxActive">
        <p><span>92</span>分</p>
        <p>下载安装状态良好，仍可优化</p>
        <span>点击优化</span>
      </div>
      <ul class="boxUl">
        <li>
          应用更新<span>所有应用已为最新版<i class="fa fa-angle-right"></i></span>
        </li>
        <li>
          <p><img src="../assets/小图标/下载2.png">下载安装</p>
          <p><img src="../assets/小图标/垃圾箱.png">应用卸载</p>
          <p><img src="../assets/小图标/扫把.png">空间清理</p>
        </li>
        <li>
          <p><i class="fa fa-commenting-o"></i>意见反馈</p>
          <p><i class="fa fa-clock-o"></i>游戏预约</p>
          <p><i class="fa fa-refresh"></i>应用同步</p>
          <p class="boxP"><i class="fa fa-credit-card"></i>v粉卡</p>
          <p class="boxP"><i class="fa fa-gift"></i>福利</p>
          <p class="boxP"><i class="fa fa-wrench"></i>设置</p>
        </li>
      </ul>
    </div>
    <mt-tabbar :fixed="true" class="tabbars">
      <mt-tab-item id="推荐">
        <router-link exact :to="{name:'Recommend'}">
          <img src="../assets/小图标/心.png">
          推荐
        </router-link>
      </mt-tab-item>
      <mt-tab-item id="应用">
        <router-link :to="{name:'Users'}">
          <img src="../assets/小图标/应用.png">
          应用
        </router-link>
      </mt-tab-item>
      <mt-tab-item id="游戏">
        <router-link :to="{name:'Game'}">
          <img src="../assets/小图标/游戏.png">
          游戏
        </router-link>
      </mt-tab-item>
      <mt-tab-item id="排行">
        <router-link :to="{name:'Rankings'}">
          <img src="../assets/小图标/排行.png">
          排行
        </router-link>
      </mt-tab-item>
      <mt-tab-item id="管理" >
        <router-link :to="{name:'Administration'}">
          <img src="../assets/小图标/管理1.png">
          管理
        </router-link>
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
    export default {
        name: "Administration",
      data(){
          return{
            username:""
          }
      },
      // data初始化，DOM渲染完成，组件还没加载
      created() {
        let userin = this.$local.get('user');
        if (userin) {
          this.username = userin.username
        }
      }
    }
</script>

<style>
  .administration li i{
    color: #969696;
  }
  .boxUl li span i{
    font-size: .5rem;
    padding-left: .3rem;
  }
  .boxUl li p i{
    margin-bottom: -.5rem;
    font-size: .7rem;
  }
</style>
